<template>
    <div class="container">
        <div class="wrap">
            <div class="top">
                <div class="head">
                    <img class="logo" src="../../assets/logo-color.svg">
                    <span class="title">会议室管理平台</span>
                </div>
                <div class="desc">武林中最有影响力的《葵花宝典》；欲练神功，挥刀自宫</div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "passport"
    }
</script>

<style scoped>
    .container {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        background: #f0f2f5;
    }
    .wrap {
        flex: 1;
        padding: 32px 0;
    }
    .logo {
        height: 44px;
        margin-right: 16px;
    }
    .title {
        position: relative;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 600;
        font-size: 33px;
        font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
        vertical-align: middle;
    }
    .desc {
        margin-top: 12px;
        margin-bottom: 40px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
    }
    @media (min-width: 768px) {
        .container {
            background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
            background-repeat: no-repeat;
            background-position: center 110px;
            background-size: 100%;
        }
        .wrap {
            padding: 32px 0 24px;
        }
    }
    .top {
        text-align: center;
    }
    .header {
        height: 44px;
        line-height: 44px;
    a {
        text-decoration: none;
    }
    }
</style>
